<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=CFy3MAfGOOvlPp5XcptDB4aqSPYpj9zY"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/sockjs/0.3.4/sockjs.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <title>车辆位置</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var pointData = {};
    var busIcon = new BMap.Icon("http://localhost:8099/bus.png", new BMap.Size(32, 32), {
        imageOffset: new BMap.Size(0, 0)
    });
    $(document).ready(function() {
        $.ajax({
            url: "/positions/now",
            method: "GET",
            dataType: "json",
            success: function (data) {
                map.centerAndZoom(new BMap.Point(118.20, 39.63), 12);
                map.setCurrentCity("唐山");
                map.enableScrollWheelZoom(true);
                Object.keys(data).forEach(function(key){
                    let e = data[key];
                    let marker = new BMap.Marker(new BMap.Point(e.longitude, e.latitude),{icon:busIcon});
                    map.addOverlay(marker);
                    pointData[key] = marker;
                });
                var socket = new SockJS('/ws');
                var stompClient = Stomp.over(socket);
                stompClient.connect({}, function(frame) {
                    stompClient.subscribe("/queue", function(e) {
                        let data = JSON.parse(e.body);
                        Object.keys(data).forEach(function (key) {
                            let e = data[key];
                            if (pointData[key] === undefined) {
                                let marker = new BMap.Marker(new BMap.Point(e.longitude, e.latitude),{icon:busIcon});
                                map.addOverlay(marker);
                                pointData[key] = marker;
                            } else {
                                pointData[key].setPosition(new BMap.Point(e.longitude, e.latitude));
                            }
                        });
                    });
                });
            }
        });
    });
</script>